<template>
  <view class="container">
    <uni-card :is-shadow="false" is-full>
      <text class="uni-h6">uni-forms 组件一般由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</text>
    </uni-card>
    <uni-section title="基本用法" type="line">
      <view class="example">
        <!-- 基础用法，不包含校验规则 -->
        <uni-forms ref="baseForm" :model="baseFormData" labelWidth="80px">
          <uni-forms-item label="姓名" required>
            <uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名"/>
          </uni-forms-item>
          <uni-forms-item label="年龄" required>
            <uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄"/>
          </uni-forms-item>
          <uni-forms-item label="性别" required>
            <uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs"/>
          </uni-forms-item>
          <uni-forms-item label="兴趣爱好" required>
            <uni-data-checkbox v-model="baseFormData.hobby" :localdata="hobbys" multiple/>
          </uni-forms-item>
          <uni-forms-item label="自我介绍">
            <uni-easyinput v-model="baseFormData.introduction" placeholder="请输入自我介绍" type="textarea"/>
          </uni-forms-item>
          <uni-forms-item label="日期时间">
            <uni-datetime-picker v-model="baseFormData.datetimesingle" return-type="timestamp"
                                 type="datetime"/>
          </uni-forms-item>
          <uni-forms-item label="选择城市">
            <uni-data-picker v-model="baseFormData.city" :localdata="cityData" popup-title="选择城市">
            </uni-data-picker>
          </uni-forms-item>

          <uni-forms-item label="选择技能">
            <uni-data-select v-model="baseFormData.skills" :localdata="skillsRange">
            </uni-data-select>
          </uni-forms-item>
        </uni-forms>
      </view>
    </uni-section>

    <uni-section title="对齐方式" type="line">
      <view class="example">
        <view class="segmented-control">
          <uni-segmented-control :current="current" :values="items" styleType="button"
                                 @clickItem="onClickItem">
          </uni-segmented-control>
        </view>
        <!-- 展示不同的排列方式 -->
        <uni-forms ref="baseForm" :label-position="alignment" :modelValue="alignmentFormData">
          <uni-forms-item label="姓名" required>
            <uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名"/>
          </uni-forms-item>
          <uni-forms-item label="年龄" required>
            <uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄"/>
          </uni-forms-item>
        </uni-forms>
      </view>
    </uni-section>

    <uni-section title="表单校验" type="line">
      <view class="example">
        <!-- 基础表单校验 -->
        <uni-forms ref="valiForm" :model="valiFormData" :rules="rules" labelWidth="80px">
          <uni-forms-item label="姓名" name="name" required>
            <uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名"/>
          </uni-forms-item>
          <uni-forms-item label="年龄" name="age" required>
            <uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄"/>
          </uni-forms-item>
          <uni-forms-item label="自我介绍">
            <uni-easyinput v-model="valiFormData.introduction" placeholder="请输入自我介绍" type="textarea"/>
          </uni-forms-item>
        </uni-forms>
        <button type="primary" @click="submit('valiForm')">提交</button>
      </view>
    </uni-section>

    <uni-section title="自定义校验规则" type="line">
      <view class="example">
        <!-- 自定义表单校验 -->
        <uni-forms ref="customForm" :modelValue="customFormData" :rules="customRules" labelWidth="80px">
          <uni-forms-item label="姓名" name="name" required>
            <uni-easyinput v-model="customFormData.name" placeholder="请输入姓名"/>
          </uni-forms-item>
          <uni-forms-item label="年龄" name="age" required>
            <uni-easyinput v-model="customFormData.age" placeholder="请输入年龄"/>
          </uni-forms-item>
          <uni-forms-item label="兴趣爱好" name="hobby" required>
            <uni-data-checkbox v-model="customFormData.hobby" :localdata="hobbys" multiple/>
          </uni-forms-item>
        </uni-forms>
        <button type="primary" @click="submit('customForm')">提交</button>
      </view>
    </uni-section>


    <uni-section title="动态表单" type="line">
      <view class="example">
        <!-- 动态表单校验 -->
        <uni-forms ref="dynamicForm" :model="dynamicFormData" :rules="dynamicRules" labelWidth="80px">
          <uni-forms-item label="邮箱" name="email" required>
            <uni-easyinput v-model="dynamicFormData.email" placeholder="请输入姓名"/>
          </uni-forms-item>
          <uni-forms-item v-for="(item,index) in dynamicFormData.domains" :key="item.id"
                          :label="item.label+' '+index" :name="['domains',index,'value']" :rules="item.rules" required>
            <view class="form-item">
              <uni-easyinput v-model="dynamicFormData.domains[index].value" placeholder="请输入域名"/>
              <button class="button" size="mini" type="default" @click="del(item.id)">删除</button>
            </view>
          </uni-forms-item>
        </uni-forms>
        <view class="button-group">
          <button size="mini" type="primary" @click="add">新增域名</button>
          <button size="mini" type="primary" @click="submit('dynamicForm')">提交</button>
        </view>
      </view>
    </uni-section>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 基础表单数据
      baseFormData: {
        name: '',
        age: '',
        introduction: '',
        sex: 2,
        hobby: [5],
        datetimesingle: 1627529992399,
        city: '',
        skills: 0
      },
      // 城市数据
      cityData: [{
        text: "北京",
        value: "10001",
      }, {
        text: "上海",
        value: "10002",
      }, {
        text: "深圳",
        value: "10004",
      }],
      skillsRange: [{
        value: 0,
        text: "编程"
      },
        {
          value: 1,
          text: "绘画"
        },
        {
          value: 2,
          text: "运动"
        },
      ],
      // 表单数据
      alignmentFormData: {
        name: '',
        age: '',
      },
      // 单选数据源
      sexs: [{
        text: '男',
        value: 0
      }, {
        text: '女',
        value: 1
      }, {
        text: '保密',
        value: 2
      }],
      // 多选数据源
      hobbys: [{
        text: '跑步',
        value: 0
      }, {
        text: '游泳',
        value: 1
      }, {
        text: '绘画',
        value: 2
      }, {
        text: '足球',
        value: 3
      }, {
        text: '篮球',
        value: 4
      }, {
        text: '其他',
        value: 5
      }],
      // 分段器数据
      current: 0,
      items: ['左对齐', '顶部对齐'],
      // 校验表单数据
      valiFormData: {
        name: '',
        age: '',
        introduction: '',
      },
      // 校验规则
      rules: {
        name: {
          rules: [{
            required: true,
            errorMessage: '姓名不能为空'
          }]
        },
        age: {
          rules: [{
            required: true,
            errorMessage: '年龄不能为空'
          }, {
            format: 'number',
            errorMessage: '年龄只能输入数字'
          }]
        }
      },
      // 自定义表单数据
      customFormData: {
        name: '',
        age: '',
        hobby: []
      },
      // 自定义表单校验规则
      customRules: {
        name: {
          rules: [{
            required: true,
            errorMessage: '姓名不能为空'
          }]
        },
        age: {
          rules: [{
            required: true,
            errorMessage: '年龄不能为空'
          }]
        },
        hobby: {
          rules: [{
            format: 'array'
          },
            {
              validateFunction: function (rule, value, data, callback) {
                if (value.length < 2) {
                  callback('请至少勾选两个兴趣爱好')
                }
                return true
              }
            }
          ]
        }

      },
      dynamicFormData: {
        email: '',
        domains: []
      },
      dynamicLists: [],
      dynamicRules: {
        email: {
          rules: [{
            required: true,
            errorMessage: '域名不能为空'
          }, {
            format: 'email',
            errorMessage: '域名格式错误'
          }]
        }
      }
    }
  },
  computed: {
    // 处理表单排列切换
    alignment() {
      if (this.current === 0) return 'left'
      if (this.current === 1) return 'top'
      return 'left'
    }
  },
  onLoad() {
  },
  onReady() {
    // 设置自定义表单校验规则，必须在节点渲染完毕后执行
    this.$refs.customForm.setRules(this.customRules)
  },
  methods: {
    onClickItem(e) {
      console.log(e);
      this.current = e.currentIndex
    },
    add() {
      this.dynamicFormData.domains.push({
        label: '域名',
        value: '',
        rules: [{
          'required': true,
          errorMessage: '域名项必填'
        }],
        id: Date.now()
      })
    },
    del(id) {
      let index = this.dynamicLists.findIndex(v => v.id === id)
      this.dynamicLists.splice(index, 1)
    },
    submit(ref) {
      console.log(this.baseFormData);
      this.$refs[ref].validate().then(res => {
        console.log('success', res);
        uni.showToast({
          title: `校验通过`
        })
      }).catch(err => {
        console.log('err', err);
      })
    },
  }
}
</script>

<style lang="scss">
.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  line-height: 35px;
  margin-left: 10px;
}
</style>
